<template lang="pug">
.cp-provider-edit
  el-dialog(:title="title", :visible="visible", @close="close", width="80%", :close-on-click-modal="false")
    .pr-tabs
      el-tabs(v-model="activeTabIndex", @tab-click="handleTab")
        el-tab-pane(label="基本", name="0")
        el-tab-pane(label="联系人", name="1")
        el-tab-pane(label="财务信息", name="2")
        el-tab-pane(label="资质", name="3")
        el-tab-pane(label="受控物料", name="4")
      .pr-init(v-show="showInit", @click="initLine") 初始化行
    .c-pop-tab.tab-base(v-show="tabShows[0]")
      el-form.pr-pop-form(:inline="true", label-width="72px")
        el-row(:gutter="36")
          el-col(:span="12")
            el-form-item.is-required(label="名称")
              el-input(v-model="formData.name", placeholder="请输入")
          el-col(:span="12")
            el-form-item.is-required(label="编号")
              el-input(:disabled="true", v-model="formData.vendorId", placeholder="系统自动生成")
        //- el-row(:gutter="36")
        //-   el-col(:span="12")
        //-     el-form-item.is-required(label="创建组织")
        //-       el-select(v-model="formData.createDeptLevel1", placeholder="请选择", @change="changeOneLevelDept")
        //-         el-option(v-for="item in oneDeptSelect", :key="item.value", :label="item.name", :value="item.value")
        //-   el-col(:span="12")
        //-     el-form-item.is-required(label="创建部门")
        //-       el-select(v-model="formData.createDeptLevel2", placeholder="请选择")
        //-         el-option(v-for="item in twoDeptSelect", :key="item.value", :label="item.name", :value="item.value")
        el-row(:gutter="36")
          el-col(:span="12")
            el-form-item.is-required(label="通讯地址")
              el-input(v-model="formData.mailingAddress", placeholder="请输入")
          el-col(:span="12")
            el-form-item.is-required(label="成立日期")
              el-date-picker(v-model="formData.vendorCreateDate", type="date", :clearable="false", style="width: 100%")
        el-row(:gutter="36")
          el-col(:span="12")
            el-form-item.is-required(label="法人代表")
              el-input(v-model="formData.corporateRepresentative", placeholder="请输入")
          el-col(:span="12")
            el-form-item(label="营业期限")
              el-input(v-model="formData.businessLimit", placeholder="请输入")
        el-row(:gutter="36")
          el-col(:span="8")
            el-form-item.is-required(label="国家")
              el-select(v-model="formData.country", placeholder="请选择")
                el-option(v-for="item in nationSelect", :key="item.value", :label="item.name", :value="item.value")
          el-col(:span="8")
            el-form-item.is-required(label="城市")
              el-select(v-model="formData.city", placeholder="请选择")
                el-option(v-for="item in countrySelect", :key="item.value", :label="item.name", :value="item.value")
          el-col(:span="8")
            el-form-item.is-required(label="邮编")
              el-input(v-model="formData.zip", placeholder="请输入")
        el-row(:gutter="36")
          el-col(:span="8")
            el-form-item(label="主页")
              el-input(v-model="formData.homePage", placeholder="请输入")
          el-col(:span="8")
            el-form-item.is-required(label="行业")
              el-select(v-model="formData.industry", placeholder="请选择")
                el-option(v-for="item in industrySelect", :key="item.value", :label="item.name", :value="item.value")
          el-col(:span="8")
            el-form-item.is-required(label="规模")
              el-select(v-model="formData.scale", placeholder="请选择")
                el-option(v-for="item in scaleSelect", :key="item.value", :label="item.name", :value="item.value")
        el-row(:gutter="36")
          el-col(:span="12")
            el-form-item.is-required(label="类别")
              el-select(v-model="formData.vendorcategory", placeholder="请选择")
                el-option(v-for="item in vendorCateSelect", :key="item.value", :label="item.name", :value="item.value")
          el-col(:span="12")
            el-form-item.is-required(label="分级")
              el-select(v-model="formData.vendorgrade", placeholder="请选择")
                el-option(v-for="item in vendorGradeSelect", :key="item.value", :label="item.name", :value="item.value")
        el-row(:gutter="36")
          el-col(:span="12")
            el-form-item.is-required(label="性质")
              el-select(v-model="formData.characters", placeholder="请选择")
                el-option(v-for="item in vendorChatacterSelect", :key="item.value", :label="item.name", :value="item.value")
          el-col(:span="12")
            el-form-item.is-required(label="状态")
              el-select(v-model="formData.status", placeholder="请选择")
                el-option(v-for="item in statusSelect", :key="item.value", :label="item.name", :value="item.value")
      el-form.pr-pop-form(:inline="true", label-width="72px")
        el-row(:gutter="36")
          el-col(:span="12")
            el-form-item.is-required(label="注册资金")
              el-input(v-model="formData.registeredCapital", placeholder="单位（万元）")
          el-col(:span="12")
            el-form-item.long-item(label="生产许可证", label-width="86px")
              el-input(v-model="formData.prdAllowNo", placeholder="请输入")
      el-form.pr-pop-form(:inline="true", label-width="72px")
        el-row(:gutter="36")
          el-col(:span="12")
            el-form-item.is-required(label="注册地址")
              el-input(v-model="formData.registeredAddress", placeholder="请输入")
          el-col(:span="12")
            el-form-item.long-item(label="经营许可证", label-width="86px")
              el-input(v-model="formData.businessCertificate", placeholder="请输入")
      el-form.pr-pop-form(:inline="true", label-width="72px")
        el-row(:gutter="36")
          el-col(:span="12")
            el-form-item.is-required(label="备案号码")
              el-input(v-model="formData.recordNo", placeholder="请输入")
          el-col(:span="12")
            el-form-item.is-required.forever-item(label="统一社会信用代码", label-width="128px")
              el-input(v-model="formData.businessRegistration", placeholder="请输入")
    .c-pop-tab.tab-contact(v-show="tabShows[1]")
      .pr-view-table
        el-table(
        :data="formData.vendorContactList",
        highlight-current-row
        size="mini")
          el-table-column(align="center", show-overflow-tooltip, type="index", label="序号")
          el-table-column(align="center", show-overflow-tooltip, prop="name", label="联系人")
            template(slot-scope="scope")
              el-input(v-model="scope.row.name", v-show="scope.row.isEdit")
              span(v-text="scope.row.name", v-show="!scope.row.isEdit")
          el-table-column(align="center", show-overflow-tooltip, prop="position", label="职务")
            template(slot-scope="scope")
              el-select(v-model="scope.row.position", placeholder="请选择", v-show="scope.row.isEdit")
                el-option(v-for="item in positionSelect", :key="item.value", :label="item.name", :value="item.value")
              span(v-show="!scope.row.isEdit") {{ scope.row.position | compare-list(positionSelect) }}
          el-table-column(align="center", show-overflow-tooltip, prop="mobile", label="手机")
            template(slot-scope="scope")
              el-input(v-model="scope.row.mobile", v-show="scope.row.isEdit")
              span(v-text="scope.row.mobile", v-show="!scope.row.isEdit")
          el-table-column(align="center", show-overflow-tooltip, prop="landLine", label="座机")
            template(slot-scope="scope")
              el-input(v-model="scope.row.landLine", v-show="scope.row.isEdit")
              span(v-text="scope.row.landLine", v-show="!scope.row.isEdit")
          el-table-column(align="center", show-overflow-tooltip, prop="fax", label="传真")
            template(slot-scope="scope")
              el-input(v-model="scope.row.fax", v-show="scope.row.isEdit")
              span(v-text="scope.row.fax", v-show="!scope.row.isEdit")
          el-table-column(align="center", show-overflow-tooltip, prop="email", label="邮箱")
            template(slot-scope="scope")
              el-input(v-model="scope.row.email", v-show="scope.row.isEdit")
              span(v-text="scope.row.email", v-show="!scope.row.isEdit")
          el-table-column(align="center", show-overflow-tooltip, prop="remark", label="备注")
            template(slot-scope="scope")
              el-input(v-model="scope.row.remark", v-show="scope.row.isEdit")
              span(v-text="scope.row.remark", v-show="!scope.row.isEdit")
          el-table-column(align="center", label="操作", width="96px")
            template(slot-scope="scope")
              el-tooltip(content="编辑", v-show="!scope.row.isEdit", @click.native="editProviderContact(scope.$index)")
                i.icon-act.el-icon-edit
              el-tooltip(content="添加", v-show="!scope.row.isEdit", @click.native="addProviderContact(scope.$index)")
                i.icon-act.el-icon-plus
              el-tooltip(content="删除", v-show="!scope.row.isEdit", @click.native="deleteProviderContact(scope.$index)")
                i.icon-act.el-icon-delete
              el-tooltip(content="确定", v-show="scope.row.isEdit", @click.native="insertProviderContact(scope.$index)")
                i.icon-act.el-icon-check
              el-tooltip(content="取消", v-show="scope.row.isEdit", @click.native="cancleProviderContact(scope.$index)")
                i.icon-act.el-icon-close
    .c-pop-tab.tab-fund(v-show="tabShows[2]")
      el-form.pr-pop-form(:inline="true", label-width="72px")
        el-row(:gutter="36")
          el-col(:span="12")
            el-form-item(label="结算币种")
              el-select(multiple, v-model="formData.settlementCurrency", placeholder="请选择")
                el-option(v-for="item in currencySelect", :key="item.value", :label="item.name", :value="item.value")
          el-col(:span="12")
            el-form-item(label="结算方式")
              el-select(v-model="formData.settlement", placeholder="请选择")
                el-option(v-for="item in settleSelect", :key="item.value", :label="item.name", :value="item.value")
        el-row(:gutter="36")
          el-col(:span="12")
            el-form-item(label="付款条件")
              el-select(v-model="formData.paymentTerms", placeholder="请选择")
                el-option(v-for="item in paymentSelect", :key="item.value", :label="item.name", :value="item.value")
          el-col(:span="12")
            el-form-item(label="发票类型")
              el-select(v-model="formData.invoiceType", placeholder="请选择")
                el-option(v-for="item in invoiceTypeSelect", :key="item.value", :label="item.name", :value="item.value")
          //- el-col(:span="12")
          //-   el-form-item(label="国家")
          //-     el-select(v-model="formData.country", placeholder="请选择")
          //-       el-option(v-for="item in nationSelect", :key="item.value", :label="item.name", :value="item.value")
        el-row(:gutter="36")
          el-col(:span="12")
            el-form-item(label="开户银行")
              el-input(v-model="formData.bank", placeholder="请输入")
          el-col(:span="12")
            el-form-item(label="默认税率")
              el-select(v-model="formData.defaultTaxRate", placeholder="请选择")
                el-option(v-for="item in defaultTaxRateSelect", :key="item.value", :label="item.name", :value="item.value")
        el-row(:gutter="36")
          el-col(:span="12")
            el-form-item(label="账户名称")
              el-input(v-model="formData.bankAccountName", placeholder="请输入")
          el-col(:span="12")
            el-form-item(label="银行账号")
              el-input(v-model="formData.bankAccountNo", placeholder="请输入")
        el-row(:gutter="36")
          el-col(:span="12")
            el-form-item(label="备注")
              el-input(v-model="formData.remark", placeholder="请输入")
          el-col(:span="12")
            el-form-item.long-item(label="税务登记号", label-width="86px")
              el-input(v-model="formData.taxID", placeholder="请输入")
    .c-pop-tab.tab-credit(v-show="tabShows[3]")
      .pr-view-table
        el-table(
        :data="formData.vendorCredentialsList",
        highlight-current-row
        size="mini")
          el-table-column(align="center", show-overflow-tooltip, type="index", label="序号")
          el-table-column(align="center", show-overflow-tooltip, prop="credential", label="证书资质")
            template(slot-scope="scope")
              el-input(v-model="scope.row.credential", v-show="scope.row.isEdit")
              span(v-text="scope.row.credential", v-show="!scope.row.isEdit")
          el-table-column(align="center", show-overflow-tooltip, prop="credentialNo", label="证书编号")
            template(slot-scope="scope")
              el-input(v-model="scope.row.credentialNo", v-show="scope.row.isEdit")
              span(v-text="scope.row.credentialNo", v-show="!scope.row.isEdit")
          el-table-column(align="center", show-overflow-tooltip, prop="vaildDate", label="证书有效期")
            template(slot-scope="scope")
              el-date-picker(v-model="scope.row.vaildDate", v-show="scope.row.isEdit", type="date", style="width: 100%")
              span(v-show="!scope.row.isEdit") {{ scope.row.vaildDate | date-locale }}
          el-table-column(align="center", show-overflow-tooltip, prop="credentialFile", label="附件")
            template(slot-scope="scope")
              el-upload(
                :ref="`upload${scope.$index}`"
                v-show="scope.row.isEdit"
                action="https://jsonplaceholder.typicode.com/posts/"
                :limit="1"
                :show-file-list="false"
                :before-upload="uploadFileBefore"
                :on-success="uploadFileSucc"
                :on-error="uploadFileFail")
                i.el-icon-plus(@click="uploadFile(scope.$index)")
              a(v-show="!scope.row.isEdit", target="_blank", :href="scope.row.credentialFile") {{ scope.row.credentialFile }}
          el-table-column(align="center", show-overflow-tooltip, prop="skus", label="相关物料")
            template(slot-scope="scope")
              el-select(v-model="scope.row.skus" multiple placeholder="请选择", v-show="scope.row.isEdit")
                el-option(v-for="item in materialSelect", :key="item.value", :label="item.name", :value="item.value")
              span(v-show="!scope.row.isEdit") {{ scope.row.skus | compare-arr(materialSelect) }}
          el-table-column(align="center", label="操作", width="96px")
            template(slot-scope="scope")
              el-tooltip(content="编辑", v-show="!scope.row.isEdit", @click.native="editProviderCredit(scope.$index)")
                i.icon-act.el-icon-edit
              el-tooltip(content="添加", v-show="!scope.row.isEdit", @click.native="addProviderCredit(scope.$index)")
                i.icon-act.el-icon-plus
              el-tooltip(content="删除", v-show="!scope.row.isEdit", @click.native="deleteProviderCredit(scope.$index)")
                i.icon-act.el-icon-delete
              el-tooltip(content="确定", v-show="scope.row.isEdit", @click.native="insertProviderCredit(scope.$index)")
                i.icon-act.el-icon-check
              el-tooltip(content="取消", v-show="scope.row.isEdit", @click.native="cancleProviderCredit(scope.$index)")
                i.icon-act.el-icon-close
    .c-pop-tab.tab-materiel(v-show="tabShows[4]")
      .pr-view-table
        el-table(
        :data="formData.vendorSupplyList",
        highlight-current-row
        size="mini")
          el-table-column(align="center", show-overflow-tooltip, type="index", label="序号")
          el-table-column(align="center", show-overflow-tooltip, prop="sku", label="内部编码")
            template(slot-scope="scope")
              span(v-show="!scope.row.isEdit") {{scope.row.sku}}
              span(v-show="scope.row.isEdit")
                el-button(type="text", @click="showSkuList(scope.$index)", v-text="scope.row.sku ? scope.row.sku : '选择物料'")
          el-table-column(align="center", show-overflow-tooltip, prop="name", label="物料名称")
            template(slot-scope="scope")
              span {{ scope.row.name }}
          el-table-column(align="center", show-overflow-tooltip, prop="manufacturer", label="品牌")
            template(slot-scope="scope")
              span {{ scope.row.manufacturer | compare-list(skuManSelect) }}
          el-table-column(align="center", show-overflow-tooltip, prop="specification", label="规格")
            template(slot-scope="scope")
              span {{ scope.row.specification }}
          el-table-column(align="center", show-overflow-tooltip, prop="skuUnit", label="单位")
            template(slot-scope="scope")
              span {{ scope.row.skuUnit | compare-list(unitSelect) }}
          el-table-column(align="center", label="操作", width="96px")
            template(slot-scope="scope")
              el-tooltip(content="编辑", v-show="!scope.row.isEdit", @click.native="editProviderMateriel(scope.$index)")
                i.icon-act.el-icon-edit
              el-tooltip(content="添加", v-show="!scope.row.isEdit", @click.native="addProviderMateriel(scope.$index)")
                i.icon-act.el-icon-plus
              el-tooltip(content="删除", v-show="!scope.row.isEdit", @click.native="deleteProviderMateriel(scope.$index)")
                i.icon-act.el-icon-delete
              el-tooltip(content="确定", v-show="scope.row.isEdit", @click.native="insertProviderMateriel(scope.$index)")
                i.icon-act.el-icon-check
              el-tooltip(content="取消", v-show="scope.row.isEdit", @click.native="cancleProviderMateriel(scope.$index)")
                i.icon-act.el-icon-close
    .pr-btns
      el-button.dia-btn(type="primary", plain, @click="close") 取消
      el-button.dia-btn.dia-after(type="primary", @click="saveProvider") 确定
  MaterielList(
    :visible="showMaterielList",
    @submit="handleSelect",
    @close="showMaterielList=false")
</template>

<script>
import { mapGetters } from 'vuex';
import ComApi from '@/api/common';
import MaterielList from '@/components/materiel/materielList';
import validate from '@/utils/validate';
import check from './check';

const { isEmpty } = validate;

export default {
  name: 'providerview',
  props: {
    title: {
      type: String,
      default: '编辑供应商详情'
    },
    visible: Boolean,
    formData: Object
  },
  data() {
    return {
      activeTabIndex: '0',
      tabShows: [true, false, false, false],
      twoDeptSelect: [],
      vendorContactListBC: [],
      vendorCredentialsListBC: [],
      vendorSupplyListBC: [],
      showMaterielList: false,
      statusSelect: [
        { name: '启用', value: '0' },
        { name: '禁用', value: '1' }
      ]
    };
  },
  components: {
    MaterielList
  },
  computed: {
    showInit () {
      const keys = {
        1: 'vendorContactList',
        3: 'vendorCredentialsList',
        4: 'vendorSupplyList'
      };
      const current = this.formData[keys[this.activeTabIndex]];
      if (current) {
        return !current.length;
      } else {
        return false;
      }
    },
    ...mapGetters([
      'oneDeptSelect', 'vendorChatacterSelect', 'vendorCateSelect',
      'vendorGradeSelect', 'scaleSelect', 'empSelect',
      'nationSelect', 'industrySelect', 'countrySelect', 'positionSelect',
      'settleSelect', 'paymentSelect', 'invoiceTypeSelect', 'currencySelect',
      'defaultTaxRateSelect', 'unitSelect', 'skuManSelect', 'materialSelect'
    ])
  },
  methods: {
    close () {
      this.$emit('close');
    },
    saveProvider () {
      const canEmit = check(this.formData);
      if (canEmit) {
        this.$emit('save', this.formData);
      }
    },
    handleTab () {
      const tabShows = [false, false, false, false];
      tabShows[this.activeTabIndex] = true;
      this.tabShows = tabShows;
    },
    // 联系人
    addProviderContact (index) {
      if (isEmpty(index)) {
        this.formData.vendorContactList.push({ isEdit: true });
      } else {
        this.formData.vendorContactList.splice((index + 1), 0, { isEdit: true });
      }
    },
    editProviderContact (index) {
      this.vendorContactListBC[index] = Object.assign({}, this.formData.vendorContactList[index]);
      this.$set(this.formData.vendorContactList[index], 'isEdit', true);
    },
    deleteProviderContact (index) {
      this.formData.vendorContactList.splice(index, 1);
      this.vendorContactListBC[index] = null;
    },
    insertProviderContact (index) {
      this.formData.vendorContactList[index].isEdit = false;
    },
    cancleProviderContact (index) {
      if (this.vendorContactListBC[index]) {
        this.$set(this.formData.vendorContactList, `${index}`, this.vendorContactListBC[index]);
      } else {
        this.deleteProviderContact(index);
      }
    },
    // 证书
    addProviderCredit (index) {
      if (isEmpty(index)) {
        this.formData.vendorCredentialsList.push({ isEdit: true });
      } else {
        this.formData.vendorCredentialsList.splice((index + 1), 0, { isEdit: true });
      }
    },
    editProviderCredit (index) {
      this.vendorCredentialsListBC[index] = Object.assign({}, this.formData.vendorCredentialsList[index]);
      this.$set(this.formData.vendorCredentialsList[index], 'isEdit', true);
    },
    deleteProviderCredit (index) {
      this.formData.vendorCredentialsList.splice(index, 1);
      this.vendorCredentialsListBC[index] = null;
    },
    insertProviderCredit (index) {
      this.formData.vendorCredentialsList[index].isEdit = false;
      if (this.creditUrl) {
        this.formData.vendorCredentialsList[index].credentialFile = this.creditUrl;
      }
    },
    cancleProviderCredit (index) {
      if (this.vendorCredentialsListBC[index]) {
        this.$set(this.formData.vendorCredentialsList, `${index}`, this.vendorCredentialsListBC[index]);
      } else {
        this.deleteProviderCredit(index);
      }
    },
    // 物料
    addProviderMateriel (index) {
      if (isEmpty(index)) {
        this.formData.vendorSupplyList.push({ isEdit: true });
      } else {
        this.formData.vendorSupplyList.splice((index + 1), 0, { isEdit: true });
      }
    },
    editProviderMateriel (index) {
      this.vendorSupplyListBC[index] = Object.assign({}, this.formData.vendorSupplyList[index]);
      this.$set(this.formData.vendorSupplyList[index], 'isEdit', true);
    },
    deleteProviderMateriel (index) {
      this.formData.vendorSupplyList.splice(index, 1);
      this.vendorSupplyListBC[index] = null;
    },
    insertProviderMateriel (index) {
      this.formData.vendorSupplyList[index].isEdit = false;
    },
    cancleProviderMateriel (index) {
      if (this.vendorSupplyListBC[index]) {
        this.$set(this.formData.vendorSupplyList, `${index}`, this.vendorSupplyListBC[index]);
      } else {
        this.deleteProviderMateriel(index);
      }
    },
    changeOneLevelDept (oneLevelDept) {
      ComApi.getTwoLevelDept({ oneLevelDept }).then((twoDeptSelect) => {
        this.formData.createDeptLevel2 = null;
        this.twoDeptSelect = twoDeptSelect;
      });
    },
    initLine () {
      const funcs = {
        1: 'addProviderContact',
        3: 'addProviderCredit',
        4: 'addProviderMateriel'
      };
      this[funcs[this.activeTabIndex]]();
    },
    uploadFile (index) {
      // 每次上传前清空上次文件
      this.$refs[`upload${index}`].clearFiles();
    },
    uploadFileBefore (file) {
      console.log(file);
      this.loading = this.$loading({
        fullscreen: true,
        text: '努力上传中, 请稍等...',
        background: 'transparent'
      });
    },
    uploadFileSucc (res, file) {
      if (file) {
        if (this.loading) {
          this.loading.close();
        }
        this.$message.success(`证书资质 ${file.name} 上传成功, 点击确认即可查看上传文件`);
        this.creditUrl = file.url;
      }
    },
    uploadFileFail (res, file) {
      if (file) {
        if (this.loading) {
          this.loading.close();
        }
        this.$message.warning(`证书资质 ${file.name} 上传失败, 请稍后再试`);
      }
    },
    // 显示物料列表
    showSkuList (index) {
      this.skuIndex = index;
      this.showMaterielList = true;
    },
    // 选择物料
    handleSelect(data) {
      if (data) {
        console.log(data);
        const origin = this.formData.vendorSupplyList[this.skuIndex];
        const fresh = Object.assign(origin, {
          sku: data.skuId,
          name: data.skuName,
          manufacturer: data.skuBrand,
          specification: data.skuSpecification,
          skuUnit: data.skuUnit
        });
        this.formData.vendorSupplyList.splice(this.skuIndex, 1, fresh);
        this.showMaterielList = false;
      }
    }
  },
  mounted () {
    const oneLevelDept = this.formData.createDeptLevel1;
    if (oneLevelDept) {
      ComApi.getTwoLevelDept({ oneLevelDept }).then((twoDeptSelect) => {
        this.twoDeptSelect = twoDeptSelect;
      });
    }
    // 处理资质相关物料
    const creditList = this.formData.vendorCredentialsList;
    creditList.forEach((item) => {
      if (!Array.isArray(item.skus)) {
        item.skus = item.skus.split(',');
      }
    });
    // 处理财务信息结算币种
    const currencys = this.formData.settlementCurrency;
    if (currencys && !Array.isArray(currencys)) {
      this.formData.settlementCurrency = currencys.split(',');
    }
  }
};
</script>

<style lang="sass">
.cp-provider-edit
  .el-dialog__body
    padding: 12px 36px 20px 40px
  .el-tabs__item:focus.is-active.is-focus:not(:active)
    box-shadow: none
  .pr-tabs
    position: relative
    height: 40px
    background: white
    .pr-init
      position: absolute
      right: 32px
      top: 7px
      color: #409EFF
      font-size: 13px
      font-weight: 500
    .el-tabs__header
      margin-bottom: 2px
  .c-pop-tab
    position: relative
    padding-top: 16px
  .tab-contact, .tab-credit, .tab-materiel
    padding-top: 8px
  .pr-view-table
    margin-bottom: 16px
    width: 100%
    table
      width: 100%!important
      &::before
        display: none
      .icon-act
        font-size: 16px
        margin-left: 3px
        margin-right: 3px
    .el-table__empty-block
      display: none
  .pr-pop-form
    .el-form-item
      width: 100%
      margin-right: 0
    .el-form-item__content
      width: calc(100% - 72px)
    .el-form-item__label
      text-align: left
    .el-select
      width: 100%
    .long-item
      .el-form-item__content
        width: calc(100% - 86px)
    .forever-item
      .el-form-item__content
        width: calc(100% - 128px)
  .pr-btns
    margin-top: 16px
    text-align: center
    .dia-btn
      width: 80px
    .dia-after
      margin-left: 40px
</style>
